<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
    }
    .father {
        width: 100%;
        height: 100px;
    }
    ul {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        width: 100%;
        background-color: #f2f2f2;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80%;
        width: 80%;
        background-color: #fff;
    }
    .header div {
        width: 25%;
        height: 100%;
        display: none;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        color: #333;
    }

</style>
<body>
    <div class="father">
        <ul>
            <li>111111</li>
            <li>222222</li>
            <li>333333</li>
            <li>444444</li>
        </ul>
        <div class="header">
            <div class="active">wwwwww</div>
            <div style="display: none;">ddddddd</div>
            <div style="display: none;">ssssss</div>
            <div style="display: none;">fffffff</div>
        </div>
    </div>

    <script>
        const lis = document.querySelectorAll('li');
        const divs = document.querySelectorAll('.header div');
        
        lis.forEach((li, index) => {
            li.onclick = function() {
                // Remove active class from all list items
                lis.forEach(li => {
                    li.classList.remove('active');
                });

                // Hide all divs
                divs.forEach(div => {
                    div.style.display = 'none';
                });

                // Set the clicked item as active and show the corresponding div
                this.classList.add('active');
                this.style.backgroundColor = 'red';
                divs[index].style.display = 'block';
            };
        });
    </script>
</body>
</html>